<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html,
      body {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script type="module">
      // 引入three
      import * as THREE from 'three';
      // 创建场景
      const scene = new THREE.Scene();
      // 刚改背景
      scene.background=new THREE.Color(0xcccccc);
      // 创建相机
      const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.set(0,2,3);
      camera.lookAt(0,0,0);
      // 创建一个物体
      const cube=new THREE.Mesh(new THREE.BoxGeometry(1,1,1),new THREE.MeshBasicMaterial({color:0x00ff00}));
      // 添加物体到场景
      scene.add(cube);





      // 创建渲染器
      const renderer = new THREE.WebGLRenderer();
       // 添加渲染器到页面
       document.body.appendChild(renderer.domElement);
      // 设置渲染器大小
      renderer.setSize(window.innerWidth, window.innerHeight);
      // 渲染器渲染场景
      renderer.render(scene, camera);


      function animate(){
        requestAnimationFrame(animate);
        cube.rotation.x+=0.01;
        cube.rotation.y+=0.01;
        renderer.render(scene,camera);
      }
      animate();
     




    </script>
  </body>
</html>
